<template>
  <div
    v-show="src"
    @tap="hideFull($event)"
    class="full_screen je-audio-btn"
  >
    <div
      class="img_wrp"
    >
      <img
        :src="src"
        class="img"
        :style="{opacity: showImg?1:0}"
      >
    </div>
    <i
      v-if="hasDelete"
      @tap="deleteItem($event)"
      class="jeicon je-icon jeicon-trash-o je-audio-btn"
    />
  </div>
</template>

<script>
export default {
  name: 'FullScreen',
  props: {
    src: {
      type: String,
      default: '',
    },
    hasDelete: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      showImg: false
    };
  },
  watch: {
    src(newValue) {
      if (newValue) {
        setTimeout(() => {
          const img = document.getElementsByClassName('img')[0];
          const imgWidth = this.string2num(window.getComputedStyle(img).width);
          const imgHeight = this.string2num(window.getComputedStyle(img).height);

          const wrp = document.getElementsByClassName('img_wrp')[0];
          const wrpWidth = this.string2num(window.getComputedStyle(wrp).width);
          const wrpHeight = this.string2num(window.getComputedStyle(wrp).height);
          this.$nextTick(() => {
            if (imgWidth >= imgHeight && imgWidth > wrpWidth) {
              img.style.width = `${wrpWidth}px`;
              return;
            }
            if (imgHeight >= imgWidth && imgHeight > wrpHeight) {
              img.style.width = `${wrpWidth}px`;
            }
          });
          this.showImg = true;
        }, 500);
      }
    },
  },
  methods: {
    hideFull(e) {
      e.stopPropagation();
      this.showImg = false;
      this.$emit('hideFull');
    },
    deleteItem(event) {
      event.stopPropagation();
      const btnArray = ['取消', '确定'];
      mui.confirm('确定删除吗?', '提示', btnArray, (e) => {
        if (e.index === 1) {
          this.$emit('deleteItem');
        }
      });
    },
    string2num(item) {
      return item.slice(0, item.length - 2) - 0;
    },
  },
};
</script>

<style lang="less" scoped>
  @import '~@/theme/index.less';
  .full_screen {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    z-index: 5000;
    .img_wrp {
      position: absolute;
      top: 15 * @hd;
      right: 15 * @hd;
      bottom: 80 * @hd;
      left: 15 * @hd;
      display: flex;
      justify-content: center;
      align-items: center;
      // padding: 15 * @hd;
      overflow: hidden;
      img{
        width: auto;
        height: auto;
      }
    }
    .jeicon{
      position: absolute;
      bottom: 40 * @hd;
      left: 40 * @hd;
      z-index: 100;
      color: #fff;
      font-size: 20 * @hd;
    }
  }
</style>
